<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <!-- <button>按钮</button> -->
        <div style="width: 650px;height: 500px;">
            <img style="width: 100%;" id="img" src="./images/10.JPG" alt="">
        </div>
</body>
<script>
    var btns = document.querySelectorAll('button');
    var img = document.getElementById('img');
    // var arrs = ['./images/10.JPG','./images/11.JPG','./images/12.JPG','./images/13.JPG','./images/14.JPG','./images/15.JPG',]
    for(var i = 0; i < btns.length; i++){
        btns[i].index = i;
        btns[i].onclick = function(){
            // console.log('被点击了')
            var index = this.index;
            img.src ='./images/1'+(index)+'.jpg';
        }
    }
    // console.log(btns);
</script>
</html>